<template>
	<view>
		<custom-navigation-bar title="评论"></custom-navigation-bar>
		
		<view class="pl_item">
			<view class="pl_nr">
				内容
			</view>
			<view class="pl_ll">
				<textarea class="pl_dd" placeholder="请输入内容" v-model="data.content"></textarea>
			</view>
			<view class="pl_nr">
				评分
			</view>
			<view class="pl_ll">
				<view class="star_box">
					<view v-for="(i,index) in star.list" :key="index" @click="clickStars(index)">
					 <img :src="star.xing>index?star.stara:star.starb" class="star_img"/>
					</view>
				</view> 
				<view class="pl_text">{{star.rateScoreText}}</view>
			</view>
			<view class="pl_nr">
				图片
			</view>
			<view class="pl_ll">
				<uni-file-picker limit="5" title="" @select="imageSelect" @delete="imgDelete" ></uni-file-picker>
			</view>
			<view class="btn" @click="submit()">
				提交
			</view>
			
		</view> 
	 
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import { ref } from "vue"; 
	import http from '../../utils/http'; 
	 import {
	 	generateApplicationId,
	 	getCurrentTimestamp,
	 	generateTime
	 } from '../../utils/timeUtils';
	import {
		onLoad,onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		data.value.orderId=query.orderId;
	})
	const data=ref({
		orderId:"",
		userId:getApp().globalData.user.userId,
		score:'',
		content:'',
		images:[]
	});
	const images=ref([]);
	const star=ref({
		rateScoreText: '',
		rateScoreDesc: ['非常不满意', '不满意', '一般', '比较满意', '非常满意'],
		stara:'/static/ic_xing@3x(1).png',//亮星星
		list:[0,1,2,3,4],
		starb:'/static/ic_xing3@3x.png',//暗星星
		xing:0
	});
	function clickStars(i){
		star.value.rateScoreText=star.value.rateScoreDesc[i]
		star.value.xing = i+1;
		data.value.score=i+1;
		console.log("点击了"+(i+1)+"颗星")
	}
	
	function imageSelect(e) {
		console.log("22222222",e)
		const tempFilePaths = e.tempFiles;
		upload(tempFilePaths,'mainImage');
		
	} 
	function imageDelete(e) {
		console.log(e.index);
		images.value.splice(e.index, 1); 
	}
	function submit(){
		uni.showLoading({
			title: '数据提交中',
			mask:true
		});
		data.value.images=JSON.stringify(images.value);
		http.request({
			url: "/order/comment/order/comment/add",
			method: "POST",
			data: {
				userId:getApp().globalData.user.userId,
				orderComment:data.value
			}
		}).then((responseData) => { 
			console.log(responseData)
			if(responseData.code==1){
				uni.showToast({
					icon: 'success',
					title: '成功'
				}) 
				uni.navigateBack(); 
			}else if(responseData.code==0){
				uni.showToast({
					icon: 'error',
					title: responseData.message
				})
			}else if(responseData.code==-1){
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		}).catch((err) => {
			uni.hideLoading()
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
		uni.hideLoading(); 
	}
	function upload(tempFilePaths){
		uni.showLoading({
			title: '上传中',
			mask:true
		}); 
		for(var i=0;i<tempFilePaths.length;i++){
			uni.uploadFile({
				url: getApp().globalData.upLoadUrl,
				filePath: tempFilePaths[i].path,
				name: 'file', // 文件字段名
				formData: {
					"fileType": "comment",
					"fileName": getCurrentTimestamp(),
					"userId": getApp().globalData.user.userId,
					width:800,
					height:800
				},
				success: (uploadRes) => { 
					let jsonData = JSON.parse(uploadRes.data);
					if(jsonData.code==1){
						 images.value.push(jsonData.data);
					}else{
						uni.showToast({
							title: '图片上传失败',
						    icon:'error',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						    mask:true
						});
					} 
				},
				fail: (error) => {
					uni.showToast({
						title: '图片上传失败',
					    icon:'error',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
					    mask:true
					});
				}
			});
		}
		uni.hideLoading(); 
	}
</script>

<style>
	@import "../application/form.scss"; 
	.btn{
		width: 60%;height: 60rpx;line-height: 60rpx;background: #2AE8DC;float: left;border-radius: 20rpx;text-align: center;margin-left: 20%;color: white;margin-bottom: 50rpx;margin-top: 50rpx;
	}
	.star_box{
		width: 100%;height: 60rpx;float: left;margin-top: 30rpx;
	}
	.star_img{
		width: 40rpx;height: 40rpx;float: left;margin-left: 10rpx;
	}
	.pl_text{
		width: 80%;float: left;font-size: 25rpx;height: 30rpx;color: #666666;margin-left:10rpx;margin-top: -10rpx;
	}
	.pl_dd{
		width: 90%;float: left;height: 200rpx;border: #cccccc 3rpx solid;border-radius: 20rpx;margin-top: 20rpx;padding: 10rpx;
	}
	.pl_ll{
		width: 80%;float: left;height: auto;
	}
	.pl_item{
		width: 94%;height:auto;float: left;margin-left: 3%;background: white;border-radius: 25rpx;margin-top: 170rpx;font-size: 25rpx;
	}
	.pl_nr{
		width: 20%;float: left;height: 60rpx;line-height: 60rpx;margin-top: 20rpx;text-align: center;
	}
	 Page{
	 	background-color: #F2F2F2;
	 	font-size: 30rpx;
	 }
	.StarsWrap{
	 width: 100%;
	 float: left;
	 height: 60rpx;
	 margin-top: 150rpx;
	}
	.StarsWrap_li{
	 float: left;
	 margin-right: 0.1rem;
	}
</style>